@import '@/styles/utils.scss';
@import '@/styles/colors.scss';

.search {
  width: 100%;
  background-color: #f5f5f5;

  .content {
    .breadcrumb {
      padding: px2rem(20) 0;
      font-size: px2rem(12);
      line-height: px2rem(12);
      color: $fontBlack;

      .breadcrumb__link {
        &:hover {
          color: $mainGold;
          text-decoration: underline;
        }
      }
    }

    .panel {
      padding: 0 px2rem(40);
      padding-bottom: px2rem(40);
      background-color: #fff;
      margin-bottom: px2rem(80);

      .filter {
        .filter__row {
          padding-top: px2rem(20);
          display: flex;
          border-top: 1px dashed #dedede;

          &:first-child {
            border-top: 0;
          }

          .filter__title {
            font-size: px2rem(14);
            line-height: px2rem(14);
            color: #999;
            width: px2rem(70);
            flex-basis: px2rem(70);
            white-space: nowrap;
          }

          .filter__items {
            display: flex;
            flex-wrap: wrap;

            .filter__item {
              margin-right: px2rem(30);
              margin-bottom: px2rem(16);
              font-size: px2rem(14);
              line-height: px2rem(14);
              color: $fontBlack;
              cursor: pointer;
              display: flex;
              align-items: center;

              &:hover {
                color: $mainGold;
              }
            }

            .filter__item_active {
              color: $mainGold !important;
            }
          }
        }
      }

      .pagination {
        display: flex;
        justify-content: center;
      }

      .empty {
        margin-top: px2rem(40);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .empty__img {
          background-image: url('~@/assets/background.png');
          background-position: 0 -1860;
          height: 180px;
          width: 180px;
        }

        .empty__title {
          margin-top: px2rem(10);
          font-size: px2rem(16);
          color: #999;
        }
      }
    }
  }
}
